<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- v-for遍历数组 -->
			<h2>人员列表（遍历数组，用的多）</h2>
			<ul>
				<li v-for="p in persons" :key="p.id">
					{{p.name}} - {{p.age}}
				</li>
			</ul>

			<hr>

			<!-- v-for遍历对象 -->
			<h2>人员列表（遍历对象，用的较少）</h2>
			<ul>
				<li v-for="(value,key,index) in car" :key="index">
					{{key}} - {{value}} - {{index}}
				</li>
			</ul>

			<hr>

			<!-- v-for遍历字符串 -->
			<h2>遍历字符串，用的较少</h2>
			<ul>
				<li v-for="(char,index) in str" :key="index">
					{{char}} - {{index}}
				</li>
			</ul>

			<!-- v-for遍历指定次数 -->
			<h2>遍历指定次数，用的较少</h2>
			<ul>
				<li v-for="(n,index) in 10" :key="index">
					{{n}} - {{index}}
				</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#demo',
			data:{
				persons:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'李四',age:19},
					{id:'003',name:'王五',age:20}
				],
				car:{
					name:'兰博基尼',
					color:'红色',
					price:9.9
				},
				str:'hello,atguigu'
			}
		})
	</script>
</html>